<template>
	<div>
		<Echart :options="options" id="pie_a" ref="pie_a" height="230px" width="100%"></Echart>
	</div>
</template>

<script>
	import Echart from '@/common/echart'
	export default {
		data() {
			return {
				options: {},
			};
		},
		components: {
			Echart,
		},
		props: {
			cdata: {
				type: Object,
				default: () => ({})
			},
		},
		watch: {
			cdata: {
				handler(newData) {
					this.options = {
						legend: {
							show: false
						},
						tooltip: {
							trigger: 'item',
							formatter: '{a} <br/>{b} : {c} ({d}%)',
							position: 'top'
						},
						toolbox: {
							show: false,
						},
						series: [{
							name:newData.name,
							type: 'pie',
							radius: ['10%', '70%'],
							itemStyle: {
								borderRadius: 4
							},
							roseType: 'area',
							label: {
								color: "#fff",
								fontSize: 14
							},
							center: ['50%', '50%'],
							data: newData.seriesData
						}],
					};
					// 自动循环tooltip
					// this.$nextTick(() => {
					// 	try {
					// 		const pie_chart = this.$refs.pie_a.chart;
					// 		let currentIndex = -1;
					// 		setInterval(function() {
					// 			var dataLen = newData.seriesData.length;
					// 			// 取消之前高亮的图形
					// 			pie_chart.dispatchAction({
					// 				type: 'downplay',
					// 				seriesIndex: 0,
					// 				dataIndex: currentIndex
					// 			});
					// 			currentIndex = (currentIndex + 1) % dataLen;
					// 			// 高亮当前图形
					// 			pie_chart.dispatchAction({
					// 				type: 'highlight',
					// 				seriesIndex: 0,
					// 				dataIndex: currentIndex
					// 			});
					// 			// 显示 tooltip
					// 			pie_chart.dispatchAction({
					// 				type: 'showTip',
					// 				seriesIndex: 0,
					// 				dataIndex: currentIndex
					// 			});
					// 		}, 2000);

					// 	} catch (error) {
					// 		console.log(error)
					// 	}
					// });
				},
				immediate: true,
				deep: true
			}
		},
		methods: {

		}
	};
</script>

<style scoped>
</style>
